<template>
    <div class="app-container">
      <el-button type="primary" icon="el-icon-plus" circle @click="onSubmitAdd()"></el-button>
      <el-dialog
        :title="visible.isBoolean === false ? '增加角色' : '修改角色'"
        :visible.sync="visible.dialogVisible"
        width="30%">
        <el-form ref="ruleForm" :model="ruleForm" label-width="80px">
          <el-form-item label="角色名称">
            <el-input v-model="ruleForm.part_name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitForm">提交</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--分页器-->
      <div style="padding:0 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="searchForm.currentPage"
          :page-sizes="[10,30,50,100]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="searchForm.totalCount">
        </el-pagination>
      </div>
      <table class="_table" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
        <thead>
        <tr>
          <th>序号</th>
          <th>角色名称</th>
          <th>创建人</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tr v-for="(item, key) in list" :key="key">
          <td>{{item.id}}</td>
          <td>{{item.part_name}}</td>
          <td>{{item.username}}</td>
          <td>{{item.create_at | parseTime}}</td>
          <td> <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="onSubmitEdit(item)"></el-button><el-button type="primary" size="mini" @click="onDialogAuth(item)">权限分配</el-button></td>
        </tr>
      </table>
      <div id="edit">
        <el-dialog title="权限分配" :visible.sync="visible.dialogAuth" width="30%">
          <el-form :model="ruleAuth" ref="ruleAuth" label-width="70px">
            <el-form-item>
              <el-checkbox-group v-model="ruleAuth.api_ids" size="mini" @change="onAuth">
                <el-checkbox :label="item.id"  v-for="(item, key) in apiList" :key="key" border>{{item.content}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitAuth">提交</el-button>
              <el-button @click="visible.dialogAuth === false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
</template>

<script>
  import { getParts, CreatePart, getPart, UpdatePart } from '../../api/part'
  import { replyRes } from '../../utils/res'
  import { parseTime } from '../../utils/index'
  import { getInterfaces } from '../../api/Interfaces'
  import { getPartApis, CreatePartApi } from '../../api/partApi'
  const defaultRuleForm = {
    part_name: ''
  }
  export default {
    name: 'part',
    data() {
      return {
        visible: {
          dialogVisible: false,
          isBoolean: false,
          dialogAuth: false
        },
        searchForm: {
          page: 1,
          pageSize: 10,
          totalCount: 0
        },
        ruleAuth: {
          id: null,
          api_ids: [],
          part_id: null
        },
        list: {},
        apiList: {},
        ruleForm: Object.assign({}, defaultRuleForm)
      }
    },
    filters: {
      parseTime(value) {
        if (!value) return ''
        value = value.toString()
        return parseTime(value, '{y}年{m}月{d}日')
      }
    },
    mounted() {
      this.fetchParts()
      this.fetchInterfaces()
    },
    methods: {
      // 获取角色列表
      fetchParts() {
        getParts(this.searchForm).then(res => {
          console.log('_____', res)
          if (replyRes(res)) {
            this.list = res.data._items
          }
        })
      },
      // 获取单条角色
      fetchPart(id) {
        getPart({ id: id }).then(res => {
          this.ruleForm = res.data
        })
      },
      // 获取接口列表
      fetchInterfaces() {
        getInterfaces({ pageSize: 10000 }).then(res => {
          this.apiList = res.data._items
          console.log(this.apiList)
        })
      },
      // 获取该角色的权限列表
      fetchPartApis(id) {
        getPartApis({ api_id: id }).then(res => {
          const arr = res.data._items
          for (const x in arr) {
            this.ruleAuth.push(arr[x])
          }
          console.log('________', this.ruleAuth)
        })
      },
      onAuth() {
        console.log(this.ruleAuth.api_ids)
      },
      // 增加角色
      onSubmitAdd() {
        this.ruleForm = Object.assign({}, { name: '' })
        this.visible.isBoolean = false // 修改
        this.visible.dialogVisible = true
      },
      onSubmitEdit(item) {
        this.visible.isBoolean = true // 修改
        this.visible.dialogVisible = true
        this.fetchPart(item.id)
      },
      // 权限
      onDialogAuth(item) {
        this.visible.dialogAuth = true
        this.ruleAuth.part_id = item.id
        this.fetchPartApis(item.id)
      },
      onSubmitAuth() {
        CreatePartApi(this.ruleAuth).then(res => {
          console.log(res.data)
        })
      },
      onSubmitForm() {
        this.visible.dialogVisible = false
        if (this.visible.isBoolean === false) {
          CreatePart(this.ruleForm).then(res => {
            console.log(res)
            if (replyRes(res)) {
              this.fetchParts()
            }
          })
        } else {
          UpdatePart(this.ruleForm).then(res => {
            console.log(res)
            if (replyRes(res)) {
              this.fetchParts()
            }
          })
        }
      },
      // 一页多少行
      handleSizeChange(pageSize) {
        this.searchForm.pageSize = pageSize
        this.fetchParts()
      },
      // 翻页
      handlePageChange(currentPage) {
        this.searchForm.page = currentPage
        this.fetchParts()
      }
    }
  }
</script>

<style scoped>

</style>
